import React, { Component } from "react";
import axios from 'axios';
import {Table,Tag,Button,Modal} from 'antd'; 
import {DeleteOutlined,EditOutlined } from '@ant-design/icons'; 
const {confirm} =Modal
class RightList extends Component{
    state={
        dataSource:[],
        isshow:false,
          columns:[
            {
              title: 'ID',
              dataIndex: 'id',
              key: 'id',
              render:(id)=>{
                return <b>{id}</b>
              }
            },
            {
              title: '权限名称',
              dataIndex: 'label',
              key: 'label',
              
            },
            {
              title: '权限路径',
              dataIndex: 'key',
              key: 'key',
              render:(key)=>{
                return <Tag color='volcano'>{key}</Tag>
              } 
            },
            {
                title: '操作',
                key: 'key',
                render:(item)=>{
                    return <div>
                     <Button 
                     danger 
                     shape="circle" 
                     icon={<DeleteOutlined />}
                     style={{margin:'10px'}}
                     onClick={()=>this.confirm(item)}
                     />
                     
                     <Button 
                     type='primary' 
                     shape="circle" 
                     icon={<EditOutlined />} 
                     style={{margin:'10px'}} />
                    </div>
                } 
              },
          ]
    }

        
    // // 确认框消按钮
    // handleCancel=()=>{
    //   this.setState({
    //     isshow:false,
    //   })
    // }
    // // 确认框ok按钮
    // handleOk=()=>{
    //     this.setState({
    //       isshow:false,
    //     })
    //   }
    // 删除
    handleDelect=(key)=>{
      if(key.grade===1){
        this.setState({
          dataSource:this.state.dataSource.filter(data=>data.id!==key.id)
        })
        axios.delete(`http://localhost:8000/posts/${key.id}`)
      } else {
      }
    }
    confirm=(item)=>{
      const self=this;
       confirm({
        title: '确定要删除吗？',
        onOk(){
          self.handleDelect(item);    
        },
        okCancel(){
        },
        okText: '确认',
        cancelText: '取消',
       })
    }
    componentDidMount(){
        axios.get('http://localhost:8000/posts').then(res=>
        this.setState({
            dataSource:res.data
        })
        )
    }
    render(){
        const {dataSource,columns} = this.state;
        return (
         <>
         <Table 
         dataSource={dataSource} 
         columns={columns} 
         pagination={{
            pageSize:5
         }}
         />
         <Modal 
         title="你确认要删除吗？" 
         open={this.state.isshow} 
         >
         </Modal>
        </>
        )
    }
}
export default RightList;